<template>
    <div :class="`detail-activity-info ${mode}`" v-if="isShow">
        <SelectCell v-if="couponList.length > 0" label="领劵" @click="openModal">
            <ActivityCouponItem v-for="item in couponList" :key="item.id" :label="item.couponType" :value="item.couponText" />
        </SelectCell>
        <SelectCell v-if="activityList.length > 0" label="满减" @click="openModal">
            <ActivityLabel :activityList="activityValue" />
        </SelectCell>
        <CouponAndActivity ref="couponAndActivity" :activityList="activityList" :couponList="couponList" />
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { MiniIcon } from '@components/base';
import { SelectCell } from '@components/shop';
import ActivityCouponItem from '../components/ActivityCouponItem';
import ActivityLabel from '../components/ActivityLabel';
import CouponAndActivity from '../components/CouponAndActivity';
import ModeMixin from '@common/mixin';
export default {
    name: 'ActivityInfo', // 活动信息
    mixins: [ModeMixin],
    components: {
        MiniIcon,
        SelectCell,
        ActivityCouponItem,
        ActivityLabel,
        CouponAndActivity,
    },
    computed: {
        ...mapState({
            activityList: state => state.detail.activityList,
            couponList: state => state.detail.couponList,
        }),
        isShow() {
            return this.activityList.length > 0 || this.couponList.length > 0;
        },
        activityValue() {
            return this.activityList.map(item => item.valueTip);
        },
    },
    methods: {
        openModal() {
            this.$refs.couponAndActivity.show();
        },
    },
};
</script>

<style lang="less">
.detail-activity-info {
    .m-v(@shop-gap-md);
    .mode-white();
    .p-v(@gap);
}
</style>
